import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {Appointment,Circle,LeavedUnused,My,Recommend} from "@/pages/index";
import IconFont,{IconNames} from "../assets/iconfont";
const Tab = createBottomTabNavigator();
function TabNavigator() {
  
  return (
    <Tab.Navigator screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName:IconNames;
        if (route.name === 'Appointment') {
         iconName = "icon-paizhao"
        } else if (route.name === 'Circle') {
          iconName = "icon-quanzi1"
        } else if(route.name === 'LeavedUnused') {
          iconName = "icon-ershouhuishou"
        } else if(route.name === "My") {
          iconName = "icon-wode"
        } else {
          iconName = "icon-tianjiatianchong"
          return <IconFont name={iconName} size={77} color={focused ? "rgba(144,0,0,0.9)":"#A75E5E"} />;
        }
        return <IconFont name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: '#A75E5E',
      // headerShown:false,
      headerTitleAlign:"center",
      headerTitleStyle:{
        color:"#A75E5E",
        fontWeight:"700"
      },
      headerStyle: {
        backgroundColor:"#fff"
      },
      headerTintColor:"#fff",
      tabBarInactiveTintColor: 'gray',
    })}>
        <Tab.Screen name="Appointment" component={Appointment} options={{title:"约拍"}}/>
        <Tab.Screen name="LeavedUnused" component={LeavedUnused} options={{ headerShown:false,title:"咸鱼"}}/>
        <Tab.Screen name="Recommend" component={Recommend} options={{ headerShown:false,tabBarLabel:""}}/>
        <Tab.Screen name="Circle" component={Circle} options={{headerShown:false,title:"圈子"}}/>
        <Tab.Screen name="My" component={My} options={{headerShown:false,title:"我的"}}/>
    </Tab.Navigator>
  );
};
export default TabNavigator;



